<template>
  <div>
    <main class="view-main">
      <section class="video-header">
        <div class="video-info">
          <div class="video-info-title" title="video.title">
            {{ video.name }}  &ensp;&ensp;&ensp;   {{video.createTime }}
          </div>
        </div>
        <div class="lower-left-options">
          <div style="display: flex;justify-content: flex-start;align-items: center;height: 30px;">
            <div class="lower-left-options-li lower-left-options-like" @click="btnLike">
              <svg :class="{ 'btn-active': isLiked }" xmlns="http://www.w3.org/2000/svg" width="28"
                   height="28" viewBox="0 0 24 24">
                <path
                    d="M5 22h-5v-12h5v12zm17.615-8.412c-.857-.115-.578-.734.031-.922.521-.16 1.354-.5 1.354-1.51 0-.672-.5-1.562-2.271-1.49-1.228.05-3.666-.198-4.979-.885.906-3.656.688-8.781-1.688-8.781-1.594 0-1.896 1.807-2.375 3.469-1.221 4.242-3.312 6.017-5.687 6.885v10.878c4.382.701 6.345 2.768 10.505 2.768 3.198 0 4.852-1.735 4.852-2.666 0-.335-.272-.573-.96-.626-.811-.062-.734-.812.031-.953 1.268-.234 1.826-.914 1.826-1.543 0-.529-.396-1.022-1.098-1.181-.837-.189-.664-.757.031-.812 1.133-.09 1.688-.764 1.688-1.41 0-.565-.424-1.109-1.26-1.221z"/>
              </svg>
              <span :class="{ 'btn-active': isLiked }"> {{ video.likeNum }} </span>
            </div>
          </div>
          <div class="options-info">
            <a href="" target="_blank">
              <el-image fit="cover" draggable="false"
                        src=""
                        alt="">
                <template #error>
                  <img style="width: 100%;height: 100%;object-fit: cover;"
                       src="https://kotokawa-akira-mywife.site/web/api/account/getProfile/000" alt="">
                </template>
              </el-image>
            </a>
            <a href="" target="_blank">
              <div class="options-img-name"> uper.name</div>
            </a>
          </div>
        </div>
      </section>
      <section class="player-container">
        <div class="playerBox">
          <video class="player" controls="controls">
            <source :src="assets" type="video/mp4"/>
            <embed src="./video/Sail-Away.swf" width="320" height="240"/>
            你的浏览器不支持该视频格式。 Your browser does not support this video format.
          </video>

            <div class="lower-more" ref="lower_more">
              <div class="video-change">
                <div style="padding-top:10px;font-size:18px;font-weight:bold">视频选集</div>
                <div class="video-change-ul">
                  <div class="video-change-li" v-for="(item,index) in videos" @click="changeVideo(item, index)">
                <span>
                  {{ item.name }}
                </span>
                  </div>
                </div>

              </div>
            </div>
          </div>


      </section>
      <section class="lower">
        <div class="lower-left" ref="lower_left">
          <div class="lower-left-summary">
            <div style="padding:5px 0px 10px 0px;font-size: 16px;">简介</div>
            <div class="lower-left-summary-text-container" ref="text_container">
              <div class="lower-left-summary-text" ref="summary_text">
                {{ video.name }}
              </div>
            </div>
          </div>
          <div class="lower-comments" v-if="reply_show">
            <div style="text-align:left;font-size: 26px;color: #000;">评论</div>
            <ul>
              <li class="lower-comments-li" v-for="(item,index) in comments">
                <div class="comment">
                  <img :src="item.imageUrl" alt="评论人头像" @click="jumpMine(item)">
                  <div>
                    <p style="word-wrap: break-word;word-break: break-all">{{ item.content }}</p>
                    <div class="author">{{ item.name }} - {{ item.time }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-else>
            <p style="margin:30px 0 10px 0;width: 100%;text-align: center;display: block;">没有更多评论了~</p>
          </div>
          <div style="background-color: #409eff;height: 20px;width: 5px;float: left"></div><p style="float: left;height: 20px;line-height: 20px">发表评论吧</p>
          <div class="publish-comment" >
            <div class="lower-reply-input">
              <textarea autocomplete="false" rows="3" placeholder="发条评论吧~" v-model="replyVideo"></textarea>
            </div>
            <div class="lower-reply-submit" @click="replyForVideo">
              发布
            </div>
          </div>
        </div>

      </section>

    </main>

  </div>
</template>
<script>
export default {
  data() {
    return {
      isLiked: false,
      isCollected: false,
      reply_show: false,
      replyVideo: '',
      isPublicReply: true,
      client: this.$route.query.client,
      id: this.$route.query.id,
      assets: this.$route.query.assets,
      userId: this.$route.query.userId,
      video: {},
      videos: [],
      comments: [],
      publishUser: {},
    }
  },
  methods: {
    handleClose() {

    },
    getVideoList() {

    },
    changeVideo(file, index) {
      this.$router.push({
        path:'/video',
        query:{
          id: file.id,
          assets: file.assets,
          userId: file.userId,
          client: this.client
        }
      });
      location.reload();

      // console.log(file)
      // this.id = file.id;
      // this.assets = file.assets;
      // this.userId = file.userId;
      // this.loadVideo();
      // this.searchByUserId();
      // this.getUserById();
      // this.getComments();
    },
    replyForVideo() {
      let comment = {};
      comment.sId = this.id;
      comment.uId = this.client;
      comment.content = this.replyVideo;
      comment.sType = 1;
      this.$axios.post("comment/setComment", this.$qs.stringify(comment))
          .then(resp => {
            alert("发布成功");
            this.replyVideo = '';
            this.getComments();
          })
          .catch(error => {
            alert("发布失败")
            console.log(error)
          })
    },
    btnLike() {
      if (this.isLiked === true) return;
      this.btnLikeClick(!this.isLiked);
      this.isLiked = !this.isLiked;
      this.video.likeNum++;
    },
    btnLikeClick() {
      this.$axios.get("resource/addLike?id=" + this.id)
          .then(resp => {
            console.log(resp.data)
          })
          .catch(error => {
            console.log(error)
          })
    },
    btnCollection() {

    },
    jumpMine(item){
      console.log(item.id)
      this.$router.push({
        path: "/showMine",
        query:{
          userId:item.id
        }
      })
    },
    loadVideo() {
      this.$axios.get("resource/searchById?videoId=" + this.id)
          .then(resp => {
            let res = resp.data
            if (res.data == null) {
              this.showMessage("资源不存在");
              return
            }
            console.log(res.data)
            this.video = res.data
          })
          .catch(error => {
            console.log(error)
          })
    },
    searchByUserId() {
      this.$axios.get("resource/searchListByUserId?userId=" + this.userId)
          .then(resp => {
            let res = resp.data
            this.videos = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    },
    getUserById() {
      this.$axios.get("user/searchUserById?id=" + this.userId)
          .then(resp => {
            let res = resp.data
            this.publishUser = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    },
    getComments() {
      this.$axios.get("comment/getComment?sId=" + this.id + "&sType=1")
          .then(resp => {
            let res = resp.data;
            this.comments = res.data;
            if (this.comments.length !== 0) {
              this.reply_show = true;
            }
            console.log(resp)
          })
          .catch(error => {
            console.log(error)
          })
    }
  },
  created() {
    this.loadVideo();
    this.searchByUserId();
    this.getUserById();
    this.getComments();

  },
}
</script>
<style lang="css">

.playerBox{
  display: flex;
  justify-content: center;
  width: 1300px;
  height: 500px;
  margin:0 auto;
}

/* 设置评论列表容器样式 */
.comment-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}
/* 设置评论样式 */
.comment {
  display: flex;
  width: 1040px;
  padding-left: 10px;
  align-items: center;
  border-radius: 5px;
  background-color: #fff;
}
/* 设置评论头像样式 */
.comment img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
}
/* 设置评论内容样式 */
.comment p {
  font-size: 14px;
  text-align: left;
  margin-bottom: 0;
}
/* 设置评论作者样式 */
.comment .author {
  font-size: 12px;
  text-align: left;
  color: #999;
}
/* 设置评论时间样式 */
.comment .time {
  font-size: 12px;
  color: #999;
  text-align: left;
  margin-left: auto;
}


.dialog-collection-ul {
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog-collection-li {
  font-size: 18px;
  margin: 5px 0 5px 0;
  padding: 5px;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  transition: all .3s ease;
}

.dialog-collection-li:hover {
}

.backTop {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 30px;
  bottom: 100px;
}

.lower ul {
  margin: 0;
  padding: 0;
}

.lower li {
  list-style: none;
}

.lower-comments {
  padding: 15px 0 15px 0;
  margin-bottom: 10px;
}
.publish-comment{
  width: 1040px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.lower-comments ul {
  width: 100%;
}

.lower-comments li {
  display: flex;

}

.player-container {
  width: 100%;
}

.player {
  aspect-ratio: 16/9;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 1px rgb(225 225 225 / 80%);
}

.video-header {
  margin: 0 auto;
  padding: 10px 0 10px 0;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.video-info {
  width: 65%;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.video-info-title {
  font-size: 20px;
  overflow: hidden;
  height: 30px;
  width: 1000px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: anywhere;
}



.video-info-uper-img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}



.lower {
  width: 1040px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto;
  padding-top: 30px;
  user-select: none;
}

.lower-left {
  width: 65%;
}

.lower-more {
  color: #c4c4c4;
  width: 20%;
  height: 500px;
  background-color: #2b2b2b;
}

.video-change-ul::-webkit-scrollbar {
  width: 5px;
}

.video-change-ul::-webkit-scrollbar-button {
  opacity: 0.0;
}

.video-change-ul::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 0.0);
  border-radius: 3px;
}

.video-change-ul:hover::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 1.0);
}

.video-change {
  border-radius: 6px;
}

.video-change-ul {
  max-height: 500px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: all .3s ease;
}

.video-change-li {
  text-align: left;
  padding: 5px 10px 5px 10px;
  margin: 5px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .3s ease;
  cursor: pointer;
}

.video-change-li span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-change-li:hover {
  max-height: 200px;
  height: auto !important;
  white-space: unset;
  background: #fff;
}

.video-change-li:hover span {
  overflow: unset;
  text-overflow: unset;
  white-space: pre-wrap;
}

.lower-left-options {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 0 0px 0;
}

.lower-left-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 20px;
  padding: 10px 0 10px 0;
}

.lower-left-summary-text {
  user-select: text;
  text-align: left;
  font-size: 17px;
  white-space: pre-wrap;
}

.lower-left-summary-text-container {
  overflow: hidden;
  height: 50px;
}

.lower-left-summary-more {
  font-size: 16px;
  transition: color .3s ease;
  user-select: none;
  cursor: pointer;
  margin-top: 10px;
  font-weight: bold;
}

.lower-left-summary-more:hover {
}

.lower-left-options-li {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
  margin-right: 50px;
  transition: color .3s ease;
  cursor: pointer;
}

.lower-left-options-li svg {
  margin-right: 8px;
  transition: fill .3s ease;
}

.lower-left-options-li:hover {
}

.lower-left-options-li:hover svg {
}

.lower-comments-li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px 0 15px 0;
}

.lower-comments-li-img-container {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 35px;
  margin-right: 20px;
}

.lower-comments-li-img-container img {
  object-fit: cover;
  width: 100%;
}

.lower-comments-li-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.lower-comments-li-header-name {
  text-align: left;
  font-size: 25px;
  user-select: text;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: anywhere;
}

.lower-comments-li-text {
  padding: 20px 0 0px 0;
  font-size: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.lower-comments-li-text-main {
  text-align: left;
  user-select: text;
  color: #000;
}

.lower-comments-li-text-more {
  font-size: 16px;
  font-weight: bolder;
  margin: 10px 0 10px 10px;
  transition: color .3s ease;
  cursor: pointer;
  display: none;
}

.lower-comments-li-text-time {
  padding: 10px 0 0px 0;
}

.lower-comments-li-text-container {
  overflow: hidden;
  max-height: 55px;
}

.lower-comments-li-text-more:hover {
}

.lower-comments-li-reply {
  padding-left: 50px;
  width: 100%;
  box-sizing: border-box;
}

.lower-comments-li-reply-li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 10px 0 10px 0;
}

.el-pager {
  width: unset !important;
}

.reply_btn {
  margin-left: 20px;
  color: #000;
  transition: color .3s ease;
  font-size: 16px;
  cursor: pointer;
}

.reply_btn:hover {
}

.reply-li {
  display: none !important;
}

.lower-reply-img-container {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  overflow: hidden;
  margin-right: 30px;
}

.lower-reply img {
  width: 100%;
  height: 100%;
}

.lower-reply {
  position: fixed;
  bottom: 0;
  left: 10%;
  width: 800px;
  min-width: 400px;
  padding: 10px 0 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.lower-reply-input textarea {
  outline: none;
  width: 800px;
  height: 45px;
  font-family: inherit;
  line-height: 38px;
  color: #000;
  resize: none;
  transition: all .3s ease;
  font-size: 20px;
  line-height: 20px;
  padding: 10px;
  margin-right: 50px;
}

/*.lower-reply-input textarea:focus {*/
/*  height: 120px;*/
/*}*/

.lower-reply-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  margin: auto;
  aspect-ratio: 16/9;
  border-radius: 6px;
  background-color: #9AC8FF;
  color: #260606;
  transition: background-color .3s ease;
  cursor: pointer;
  user-select: none;
}

.lower-reply-submit:hover {
  background-color: #ff9aee;
}

.fade-enter-active,
.fade-leave-active {
  transition: all .3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0.0 !important;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1.0 !important;
}

.btn-active {
  fill: #e82424;
  color: #e82424;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.lower-switcher {
  display: none;
  font-size: 20px;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0px 15px 0;
  margin: 0 5px 0 5px;
}

.lower-switcher-active {
  font-weight: 700;
  color: #409eff;
}

.options-img-container {
  width: 50px;
  aspect-ratio: 1/1;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 25px;
}

.options-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.options-info {
  display: none;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
}

.el-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
}

.dialog-collection-ul::-webkit-scrollbar {
  width: 5px;
}

.dialog-collection-ul::-webkit-scrollbar-button {
  opacity: 0.0;
}

.dialog-collection-ul::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 0.0);
  border-radius: 3px;
}

.dialog-collection-ul:hover::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 1.0);
}


.el-dialog__body {
  padding: 5px 20px 5px 20px !important;
}

.el-image {
  height: 70px;
  width: 70px;
  overflow: hidden;
  border-radius: 35px;
}

.progress-outer {
  width: 100%;
  height: 60px;
}

.progress-inner {
  width: 0%;
  height: 20px;
}

@media screen and (max-width: 550px) {
  .lower-left-summary {
    font-size: 17px;
  }

  .lower-comments-li-text {
    font-size: 14px;
  }

  .video-header {
    width: 100%;
    padding: 40px 10px 30px 10px;
  }

  .video-info {
    width: 100%;
  }

  .player {
    width: 100%;
  }

  .video-info-uper {
    display: none;
  }

  .lower-comments-li {
    overflow: hidden;
  }

  .el-dialog {
    width: 80% !important;
  }

  .lower-reply {
    opacity: 1.0 !important;
    left: 0;
    width: 100vw;
  }

  .bottom_reply {
    display: flex !important;
  }

  .lower-reply-input textarea {
    width: 120px !important;
    font-size: 10px;
  }

  .lower {
    width: 100%;
    margin: 0;
    padding: 0 5px 0 5px;
    box-sizing: border-box;
  }

  .lower-reply textarea {
    width: 120px !important;
  }

  .lower-switcher {
    display: flex;
  }

  .lower-left {
    width: 100% !important;
  }

  .lower-more {
    width: 100% !important;
    display: none;
  }

  .reply-li {
    width: 100%;
  }

  .options-info {
    display: flex;
  }

  .lower-left-options-li {
    margin-right: 3px;
  }

  .el-message-box {
    width: 80% !important
  }

  .video-info-title {
    font-size: 18px !important;
  }

  .video-info-time {
    font-size: 15px !important;
  }

  .video-info-playcount {
    font-size: 15px !important;
  }
}
</style>